{% extends "layout.html" %}
{% block header %}
<script type="text/javascript" src='/js/lib/Chart.min.js' ></script>
{% endblock %}

{% block content %}
<div class="pb-2 mt-2 mb-4 border-bottom">
  <h2>
    <i class="fas fa-chart-bar fa-sm  fa-sm"></i>| Chart.js and Alpha Vantage
  </h2>
</div>

<div class="btn-group d-flex" role='group'>
  <a class="btn btn-primary w-100" href='https://www.chartjs.org/docs'  target='_blank'>
    <i class="fas fa-chart-bar fa-sm">| Chart.js Docs</i>
  </a>
  <a class="btn btn-primary w-100" href='https://www.alphavantage.co/documentation'  target='_blank'>
    <i class="fas fa-money-check-alt fa-sm">| Alpha Vantage Docs</i>
  </a>
</div>

<div class="container">
  <div class="mt-2 mb-4">
   <h3>Chart.js — Line Chart Demo using data from Alpha Vantage</h3>
  </div>
  | Alpha Vantage APIs are grouped into four categories: (1) Stock Time Series Data, (2) Physical and Digital/Crypto Currencies (e.g., Bitcoin), (3) Technical Indicators, and (4) Sector Performances. All APIs are realtime: the latest data points are derived from the current trading day.
  | ChartJS can render various chart types with different formatting.
  | This example plots the closing stock price of Microsoft for the last 100 days.
  <div class="mt-2 mb-4">
    <div style='width:90%; height:80%; margin: 0 auto;'><canvas id="chart"></canvas></div>

  </div>
</div>


<input type="hidden" id="dates" value="{{dates}}" />
<input type="hidden" id="closing" value="{{closing}}" />

<script>

var datesList = JSON.parse(document.getElementById('dates').value);
    var closingList = JSON.parse(document.getElementById('closing').value);
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'line',
    data: {
    labels: datesList,
    datasets: [{
    label: "Microsoft's Closing Stock Values",
    data: closingList,
    borderColor: "#3e95cd",
    backgroundColor: "rgba(118,152,255,0.4)"
    }]
    },
    options: {
    responsive:true,
    maintainAspectRatio: true,
    },
    });

</script>

{% endblock %}
